<template>
	<div class="about">
	<el-drawer
	  title="图片管理"
	  :visible.sync="drawer"
	  direction="rtl"
	  :before-close="close_box"
	>
	<div class="main">
	<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
		<el-tab-pane v-for="(item,index) in img_category" :key="index" :label="item.name" :name="item.name">
			<div class="demo-image">
			  <div class="block">
			    <el-upload :action="upfile_url" :data="{ cid: cate_id}" :on-success="upimg_back_fun" :headers="upfile_head"
			     :limit="9" multiple :show-file-list="false" name="img" list-type="picture-card" class="imgs">
			    	<i class="el-icon-plus"></i>
			    </el-upload>
				
			  </div>
			  <div class="img_panel">
				  <el-image v-for="(items, indexs) in item.img" :key="indexs" @click="choose_img(items)" 
				      
				        :src="getimg+items.url" class="imgs"></el-image>
			  </div>
			</div>
		</el-tab-pane>
	  
	  </el-tabs>
	</div>
	</el-drawer>
	</div>
</template>

<script>
import imageModel from '../model/image.js'
import {
		Api_url
	} from '../api/config.js';
export default {
			data(){
				return{
					img_category:[],
					choose:[],
					activeName: '',
					upfile_url:Api_url+"/cms/image/insert",
					cate_id:0,
					getimg:Api_url,
					upfile_head: {
						token: localStorage.getItem('token')
					},
				}
			},
			props: {
			drawer:'',
			back_fun:Function,
			send_father:Function
			},

			mounted() {
				this.get_img_category()
			},
			methods:{
				handleClick(tab, event) {
				        console.log(tab, event);
						this.cate_id=this.img_category[tab.index].id
				},
				close_box()
				{
					this.back_fun(1)
				},
				choose_img(img)
				{
					this.send_father(img)
				},
				get_img_category()
				{
					imageModel.get_img_category().then(res=>{
						this.img_category=res.data
						console.log(this.img_category)
						if(this.img_category.length>0){
							if(this.activeName==''){
								this.activeName=this.img_category[0].name
								this.cate_id=this.img_category[0].id
							}
								
						}
						
						
					})
				},
				//图片上传回调
				async upimg_back_fun(res) {
					 this.$message({
						type: 'success',
						message: '上传成功'
					});
					this.get_img_category()
				},
			}
		}
</script>

<style>
	.about {
		text-align: left;
		padding: 20px;
	}
	.main{
		padding: 30px;
	}
	.imgs{
		width: 100px;
		height: 100px;
		margin-right: 10px;
		margin-top: 30px;
	}
	.img_panel{
		margin-top: 50px;
	
	}
</style>
